<!-- 申请退款 -->
<template>
  <div>
    <van-nav-bar
      fixed placeholder
      title="订单确认"
      left-arrow
    />

    <div class="orderbox">
      <div class="address">
        <div><van-icon name="location" size="28"/></div>
        <div>
          <div>
            <span class="name">何华</span>
            <span class="light">17735461390</span>
          </div>
          <div class="light">四川省成都市云华路333号</div>
        </div>
        <div><van-icon name="arrow" size="26" color="#DDDDDD"/></div>
      </div>
      <div class="orderGood">
        <div>订单商品</div>
        <div>
          <van-card
            price="6222.00"
            desc="iPad Pro系列"
            title="iPad Pro系列"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
          >
           <template #tags>
            <van-col>商品规格</van-col>
          </template>
          </van-card>
        </div>
        <div class="buyNum">
          <div>购买数量</div>
          <div class="buyBtn">
            <van-button icon="minus" size="mini"/>
            <van-field v-model="num" type="digit" style="width:40px"/>
            <van-button icon="plus" size="mini"/>
          </div>
        </div>
      </div>
     <div>
        <div>
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <van-popup
         v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px;"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
      <div>
        <van-cell-group>
          <van-cell title="运费" value="￥10.00" border/>
          <van-cell title="合计" value="￥6210.00" border/>
        </van-cell-group>
      </div>
     </div>
     
    
    
    <div >
      <van-radio-group v-model="checked">
        <van-cell title="微信支付" clickable >
          <template #right-icon>
            <van-radio name="1" checked/>
          </template>
        </van-cell>
      </van-radio-group>
      </div>
    </div>

    
    <van-submit-bar :price="621000" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      num:1,
      chosenCoupon: -1,
      checked:'1',
      showList:false,

      coupons: [{
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '优惠券名称',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '222',
        unitDesc: '元',
      }],
      disabledCoupons: [{
        available: 1,
        condition: '无使用门槛\n最多优惠12元',
        reason: '',
        value: 150,
        name: '优惠券名称',
        startAt: 1489104000,
        endAt: 1514592000,
        valueDesc: '500',
        unitDesc: '元',
      }],
    }
  },
   methods: {
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  }
}
</script>

<style  scoped>
  .orderbox{
    background-color: #F9F9F9;
  }
  .orderbox>div{
    background-color: white;
    margin-bottom: 20px;
  }
  .address .van-icon{
    color: #FF6633;
  }
  .address{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0;
  }
  .light{
    font-size: 14px;
  }
  .name{
    font-weight: 500;
    padding: 0 10px;
  }
  .orderGood{
    padding: 10px;
    text-align: left;
  }
  .van-card{
    text-align: left;
    margin: 10px 0;
  }
  .buyNum{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .buyBtn{
    display: flex;
    align-items: center;
  }
  .van-cell__title,
  .van-submit-bar__text{
    text-align: left;
  }
</style>
